<template>
  <div class="swipetwo">
     <van-swipe class="my-swipe" indicator-color="red">
      <van-swipe-item v-for="(item, index) in swipeTwoList" :key="index">
        <div class="item">
          <div
            class="listItem"
            v-for="(itemSpan, indexx) in item.list"
            :key="indexx"
          >
            <img :src="itemSpan.img" alt="" />
            <div class="listName">{{ itemSpan.name }}</div>
          </div>
        </div>
      </van-swipe-item>
      <!-- <van-swipe-item>2</van-swipe-item> -->
    </van-swipe>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  props:{
    swipeTwoList:{
      type:Array
    }
  },
  mounted(){
    // console.log(this.swipeTwoList);
  }
};
</script>

<style scoped lang='scss'>
.swipetwo{
  margin-top: 500px;
  width: 100%;
}
.my-swipe .van-swipe-item {
  display: flex;
  // color: #fff;
  font-size: 20px;
  height: 600px;
  width: 100%;
  color: black;
  text-align: center;
 
  
  .item{
    display: flex;
    height: 500px;
    margin-left: 40px;
    flex-wrap: wrap;
    .listItem{
      width: 19%;
      margin-top: 40px;
    }
    img{
      height: 150px;
    }
  }
}
</style>